<template>
	<view id="body">
		<view class="top">
			<text class="fk">待付款</text>
		</view>
		<view class="address">
			<text class="contacts">{{contacts}}</text>
			<text class="phone">{{contacts_phone}}</text>
			<view class="ad">
				<text class="">{{address}}</text>
			</view>
			<view class="dz">
				<text class="t-icon t-icon-dizhi" style="width: 40rpx;height: 40rpx;"></text>
			</view>
			<view class="bj" @click="bj">
				<text class="t-icon t-icon-daochu1024-30" style="width: 40rpx;height: 40rpx;"></text>
			</view>
		</view>
		<!-- 订单内容 -->
		<view class="order-conent">
			<view>
				<text class="order-title">订单标题:</text>
				<text class="order-title-text">{{title}}</text>
			</view>
			<view> 
				<text class="order-conent-ct">订单内容:</text>
				<text class="order-conentct-text">{{content}}</text>
			</view>
			<view>
				<text class="order-remarks">订单备注:</text>
				<text class="order-remarks-text">{{bezhu}}</text>
			</view>
			<!-- 图片信息 -->
			<view style="padding-bottom: 20rpx;">
				<u-divider text="图片信息" textColor="#3c9cff" lineColor="#3c9cff"></u-divider>
			</view>
			<view class="order-imglist"> 
				<!-- <u-empty mode="data" text="图片为空" v-if="false"></u-empty> -->
				<view v-if="true">
					<image :src="item" v-if="item" mode="" class="imglist" v-for="(item,index) in imagesList" :key="item" @tap="ViewImage(index)" @longpress="deleteImg(index)"></image>
				</view>
			</view>
			<view class="bj2" @click="bj2">
				<text class="t-icon t-icon-daochu1024-30" style="width: 40rpx;height: 40rpx;"></text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order">
			<view>
				<text class="order-id">订单编号:</text>
				<text class="idtext">{{orderid}}</text>
				<text class="order-id-fz" @click="copy">复制</text>
			</view>
			<view>
				<text class="order-user">发布用户:</text>
				<text class="username">宇宙最帅的那个人</text>
			</view>
			<view>
				<text class="order-time">下单时间:</text>
				<text class="createtime">2022-10-13 22:25:21</text>
			</view>
			<view>  
				<text class="zf-time">支付方式:</text>
				<text class="zftype" :style="{color:flage?'#3c9cff':'#ff5500'}">未支付</text>
			</view>
			<!-- 按钮 -->
			<view style="padding: 20rpx 0rpx; ">
				<text class="price">金额￥6</text>
				<text class="ljfk" @click="ljfk">立即支付</text>
			</view>
		</view>
		<!-- 地址模态框 -->
		<view class="bjmodal">
			<u-modal :show="bjIsTrue" :showConfirmButton="false" closeOnClickOverlay="true" @close="close" >
				<view class="aa">
					<view class="v-name">
						<text class="t-icon t-icon-yonghu" style="width: 48rpx; height: 48rpx; float: left;"></text>
						<text class="mname">联系人</text> 
						<input placeholder="输入姓名" class="name-input" v-model="contacts"/>
					</view>
					<view class="line" style="margin-top: 64rpx;">
						<u-line color="#2979ff"></u-line>
					</view>
					<view class="v-phone">
						<text class="t-icon t-icon-shouji" style="width: 48rpx; height: 48rpx; float: left; "></text>
						<text class="mphone">联系电话</text>
						<input placeholder="输入电话" class="phone-input" v-model="contacts_phone"/>
					</view>
					<view class="line" style="margin-top: 84rpx;">
						<u-line color="#2979ff"></u-line> 
					</view>
					<view class="v-address">
						<text class="t-icon t-icon-dizhi" style="width: 48rpx; height: 48rpx; float: left; "></text>
						<text class="maddress">联系地址</text>
						<input placeholder="输入地址信息" class="address-input" v-model="address"/>
					</view>
					<view class="line" style="margin-top: 84rpx;">
						<u-line color="#2979ff"></u-line>
					</view>
				</view>
			</u-modal>
		</view>
		<!-- 订单内容模态框 -->
		<view class="bjmoda2">
			<u-modal :show="bj2IsTrue" :showConfirmButton="false" closeOnClickOverlay="true" @close="close2" >
				<view class="bb">
					<!-- 标题 -->
					<uni-section class="mb-10" title="发布标题" type="line" titleColor="#909399"></uni-section>
					<view class="title-input">
						<u--textarea placeholder="请输入发布标题" v-model="title" height="32rpx" count="true"  maxlength=10></u--textarea>
					</view> 
					<!-- 内容 -->
					<uni-section class="mb-10" title="发布内容" type="line" titleColor="#909399"></uni-section>
					<view class="content-input">
						<u--textarea v-model="content" placeholder="请输入发布内容"  count="true"  maxlength=400 ></u--textarea>
					</view>
					<!-- 备注信息 -->
					<uni-section class="mb-10" title="备注信息(选填)" type="line" titleColor="#909399"></uni-section>
					<view class="beizhu-input">
						<u--textarea v-model="bezhu" placeholder="请输入发布内容"  count="true"  maxlength=100 ></u--textarea>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagesList: [ //订单图片信息
				'https://ft-glb.oss-cn-chengdu.aliyuncs.com/images/166381563362181.jpg',
				'https://ft-glb.oss-cn-chengdu.aliyuncs.com/images/166381605418834.jpg',
				'https://ft-glb.oss-cn-chengdu.aliyuncs.com/images/166381563362181.jpg',
				'https://ft-glb.oss-cn-chengdu.aliyuncs.com/images/166381605418834.jpg',
				'https://ft-glb.oss-cn-chengdu.aliyuncs.com/images/166381563362181.jpg',
				'https://ft-glb.oss-cn-chengdu.aliyuncs.com/images/166381605418834.jpg',
				'https://ft-glb.oss-cn-chengdu.aliyuncs.com/images/166381563362181.jpg',
				'https://ft-glb.oss-cn-chengdu.aliyuncs.com/images/166381605418834.jpg',
				],
				flage:false,//是否支付标记
				bjIsTrue:false,//编辑1模态框标记
				bj2IsTrue:false,//编辑2模态框标记
				orderid:"1030244870976962560",//订单id
				contacts:"张三",//联系人
				contacts_phone:"17628178054",//联系人电话
				address:"俊园3号公寓-311",//地址
				title:"帮我买水果", //标题
				content:"需要一位靓仔帮我购买一斤葡萄",//内容
				bezhu:"最好是女生,送到寝室",//备注
			}
		},
		methods: {
			//修改地址信息
			bj(){
				this.bjIsTrue = true
				console.log("编辑1")
			},
			//地址信息修改模态框
			close(){
				this.bjIsTrue = false
			},
			//订单内容信息修改模态框
			bj2(){
				this.bj2IsTrue = true
				console.log("编辑2")
			},
			close2(){
				this.bj2IsTrue = false
			},
			// 复制订单
			copy(){
				 uni.setClipboardData({
				    data:this.orderid,
				    success: function (res) {
				        uni.getClipboardData({
				        success: function (res) {
				            uni.showToast({
				                title: "复制成功",
				                icon: 'none',
				            })
				        },
				        })
				    },
				    })
			},
			//立即付款
			ljfk(){
				uni.login({
					success(res) {
						uni.request({
							url:"http://192.168.192.214:8081/wxlogin/"+res.code,
							method:"GET",
							success(res) {
								var openid = res.data.date
								uni.request({
									url:"http://192.168.192.214:8081/wxpay/"+openid,
									method:"GET",
									success(res) {
										var data = res.data.date
										console.log("接收的数据是:"+JSON.stringify(data))
										uni.requestPayment({
											// "provider": data.provider,    //支付类型-固定值
											"timeStamp": data.timeStamp, // 时间戳（单位：秒）
											"nonceStr": data.nonceStr, // 随机字符串
											"package": data.packAge, // 固定值
											"signType": data.signType, //固定值
											"paySign": data.paySign, //签名
											    success(res) {
													console.log("唤起支付成功！"+JSON.stringify(res))
												},
											    fail(e) {
													uni.$u.toast("支付失败！")
												}
										})
									},
									fail(res) {
										uni.$u.toast("获取openid失败！")
									}
								})
							},
							fail(res) {
								uni.$u.toast("获取code失败！")
							}
						})
					},
					fail(res) {
						uni.$u.toast("获取登录信息失败！")
					}
				})
			},
			//预览图片
			ViewImage(index) {
				uni.previewImage({
					urls: this.imagesList,
					current: index
				});
			},
			//图片长按删除
			deleteImg(index){
				var list = []
				for(var i = 0;i<this.imagesList.length;i++){
					if(index == i){
						continue
					}else{
						list.push(this.imagesList[i])
					}
				}
				this.imagesList = list
			},
		}
	}
</script> 
 
<style>
	@import url("@/static/css/orderDetails.css");
	page {
		background-color:#f5f5f5; 
	}
</style>